<template>
    <div class="main-page-login">
        <div class="bj"></div>
        <div class="content">
            <div class="logo">LOGO</div>

            <!-- tabs start -->
            <div class="tabs">
                <div class="item" 
                :class="{
                    'active':item.key == active_tabs
                }"
                v-for="(item, index) in list_tabs" :key="index">
                    <span @click="handelTab(item)">{{ item.name }}</span>
                </div>
            </div>
            <!-- tabs end -->

            <!-- account-form start -->
            <div class="form">
                <a-spin :spinning="show_loading" >
                    <a-form-model ref="formAccount" :rules="rules_account" :model="login_form_account"  size="large" v-show="active_tabs=='account'">
                        <a-form-model-item prop="account">
                            <a-input v-model="login_form_account.account" placeholder="请填写您的账号">
                                <a-icon slot="prefix" type="user" />
                            </a-input>
                        </a-form-model-item>
                        <a-form-model-item prop="password">
                            <a-input v-model="login_form_account.password" type="password" placeholder="请填写您的密码">
                                <a-icon slot="prefix" type="lock" />
                            </a-input>
                        </a-form-model-item>
                    </a-form-model>
                    <a-form-model  ref="formPhone"  :rules="rules_phone" :model="login_form_phone"  size="large" v-show="active_tabs=='phone'">
                        <a-form-model-item prop="phone">
                            <a-input v-model="login_form_phone.phone" placeholder="请填写您的账号">
                                <a-icon slot="prefix" type="user" />
                            </a-input>
                        </a-form-model-item>
                        <a-form-model-item prop="code">
                            <a-row>
                                <a-col :span="12">
                                    <a-input v-model="login_form_phone.code" placeholder="验证码">
                                        <a-icon slot="prefix" type="lock" />
                                    </a-input>
                                </a-col>
                                <a-col :span="11" :offset="1">
                                    <a-button :disabled="sms_code.run" @click="smsCodeTimeDown" style="width:100%;">
                                        {{ !sms_code.run ? '获取验证码' : (`重新获取(${sms_code.time_down})`) }}
                                    </a-button>
                                </a-col>
                            </a-row>
                            
                        </a-form-model-item>
                    </a-form-model>
                    <a-row>
                        <a-col :span="12">
                            <a-checkbox >自动登录</a-checkbox>
                        </a-col>
                        <a-col :span="12" style="text-align:right;">
                            <a type="link">忘记密码?</a>
                        </a-col>
                    </a-row>
                    <a-button type="primary" @click="handleLogin" class="sub-btn">登录</a-button>
                </a-spin>
            </div>
            <!-- account-form end -->


        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            "list_tabs" : [
                { 'key' : 'account', 'name':'账号密码登录' },
                { 'key' : 'phone', 'name':'手机号登录' }
            ],
            "active_tabs"   : "account",

            // 账号密码登录
            "login_form_account"    : {
                "account"   : "",
                "password"  : "",
            },

            // 手机账号登录
            "login_form_phone"  : {
                "phone" : "",
                "code"  : "",
            },
            "sms_code":{
                "run"   : false,
                "time_max"  : 60,
                "time_down" : 60,
            },

            // 表单验证
            "rules_account": {
                "account"  : [
                    { required: true, message: '请填写您的账号', trigger: 'blur' },
                    { min: 3, max: 8, message: '请输入3~8个字', trigger: 'blur' },
                ],
                "password"  : [
                    { required: true, message: '请填写您的密码', trigger: 'blur' },
                ],
            },
            "rules_phone": {
                "phone"  : [
                    { required: true, message: '请填写您的手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '手机号格式错误', trigger: 'blur' },
                ],
                "code"  : [
                    { required: true, message: '请填写验证码', trigger: 'blur' },
                ],
            },

            "show_loading":false,
        }
    },
    methods:{
        handelTab(item){
            this.active_tabs = item.key;
        },
        smsCodeTimeDown(){
            if( this.sms_code.time_down > 0){
                this.sms_code.run = true;
                this.sms_code.time_down--;
                setTimeout(()=>{
                    this.smsCodeTimeDown();
                },1000);
            }else{
                this.sms_code.run = false;
                this.sms_code.time_down = this.time_max;
            }
        },
        // 点击登录
        handleLogin(){
            var form = this.active_tabs=='account' ? this.$refs.formAccount : this.$refs.formPhone;
            form.validate(valid => {
                if (valid) {
                    this.show_loading = true;
                    setTimeout(()=>{
                        this.show_loading = false;
                        this.$router.push({
                            "path":"/"
                        });
                    },1500)
                    
                } else {
                    this.$message.warning('请先完成表单内容');
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
@import "./login.less";
</style>